<section class="grid-demo">
  <h3>Horizontal</h3>
  <div lv-row lvGutter="16">
    <div lv-col lvSpan="6"><div class="ui-col-box">col-6</div></div>
    <div lv-col lvSpan="6"><div class="ui-col-box">col-6</div></div>
    <div lv-col lvSpan="6"><div class="ui-col-box">col-6</div></div>
    <div lv-col lvSpan="6"><div class="ui-col-box">col-6</div></div>
  </div>
  <h3>Responsive</h3>
  <div lv-row [lvGutter]="{ xs: 8, sm: 16, md: 24, lg: 32 }">
    <div lv-col lvSpan="6"><div class="ui-col-box">col-6</div></div>
    <div lv-col lvSpan="6"><div class="ui-col-box">col-6</div></div>
    <div lv-col lvSpan="6"><div class="ui-col-box">col-6</div></div>
    <div lv-col lvSpan="6"><div class="ui-col-box">col-6</div></div>
  </div>
  <h3>Vertical</h3>
  <div lv-row [lvGutter]="[16, 24]">
    <div lv-col lvSpan="6"><div class="ui-col-box">col-6</div></div>
    <div lv-col lvSpan="6"><div class="ui-col-box">col-6</div></div>
    <div lv-col lvSpan="6"><div class="ui-col-box">col-6</div></div>
    <div lv-col lvSpan="6"><div class="ui-col-box">col-6</div></div>
    <div lv-col lvSpan="6"><div class="ui-col-box">col-6</div></div>
    <div lv-col lvSpan="6"><div class="ui-col-box">col-6</div></div>
    <div lv-col lvSpan="6"><div class="ui-col-box">col-6</div></div>
    <div lv-col lvSpan="6"><div class="ui-col-box">col-6</div></div>
  </div>
</section>
